<template>
  <!-- elementPlus中的layout布局，默认将容器分为24列，span属性可以调整格栅占据的列数 -->
  <el-row>
    <!-- lg为响应式布局的属性表示当页面大于1200px时，展示左边16列右边8列的布局 -->
    <!-- md为响应式布局的属性表示当页面大于992px小于1200px时，展示左边和右边相等的布局 -->
    <el-col :lg="16" :md="12" class="left-page">
      <!-- 这里样式书写使用了windi css框架，简化css代码书写 -->
      <h2>欢迎回来</h2>
      <span>此站点是《vue3 + vite实战商城后台开发》视频课程的演示地址</span>
    </el-col>
    <el-col :lg="8" :md="12" class="right-page">
      <h2>欢迎回来</h2>
      <div>
        <span class="line"></span>
        <span>账号密码登录</span>
        <span class="line"></span>
      </div>
      <!-- 使用elementplus中的form表单 -->
      <el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名">
            <!-- 用户名字体图标 -->
            <template #prefix>
              <el-icon>
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input show-password v-model="form.password" placeholder="请输入密码">
            <!-- 密码字体图标 -->
            <template #prefix>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <!-- round color 属性是elementPlus中的属性 -->
          <el-button :loading="loading" class="w-[250px]" type="primary" @click="onSubmit" round
            color="#626aef">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="js" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { getinfo,login} from '@/apis/manager.js'
import { useRouter } from 'vue-router';
import { setToken } from "@/composables/auth.js"
import { toast } from "@/composables/util.js"
import {useUserStore} from "@/store"

const router = useRouter();
const formRef = ref(null)
const loading = ref(false)
const userStore = useUserStore();

const form = ref({
  username: '',
  password: ''
})

const rules = ref({
  // 触发方式 blur 元素失去焦点时触发
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度应该是3到5个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 5, message: '长度应该是3到5个字符', trigger: 'blur' }
  ]
})

const onSubmit = () => {
  // 调用validate方法
  formRef.value.validate((valid) => {
    if (!valid) {
      return false;
    }

    // 通过校验，登录之前将登录按钮状态设置为 登录中 状态
    loading.value = true

    login(form.value.username, form.value.password)
      // 捕获到请求成功的结果
      .then((res) => {
        //提示成功
        toast("登录成功")
        
        // 存储登录cookie
        setToken(res.token)

        // 获取用户信息，并将其存储在pinia中
        getinfo().then(res=>{
          userStore.user = res
        })

        // 跳转首页
        router.push("/");
      }).finally(() => {
        // 不论登录成功与否，登录状态设置为正常状态
        loading.value = false
      })
  }) 
}

// 监听回车事件
const onKeyUp = (e) => {
  // 如果按下的按键是enter时，调用登录接口实现登录
  if(e.key == "Enter"){ onSubmit()}
}
// 页面挂载完后添加键盘监听事件
onMounted(()=>{
  document.addEventListener("keyup",onKeyUp)
})

// 组件卸载之前移除键盘监听事件
onBeforeUnmount(()=>{
  document.removeEventListener("keyup",onKeyUp)
})
</script>

<style scoped>
/* 让el-row容器的高度充满整个视口 */
.el-row {
  height: 100vh;
  @apply bg-indigo-500;
}

/* 使用windi css框架 简化css代码书写 */
.el-row .left-page {
  @apply flex flex-col justify-center items-center;
}

.left-page h2 {
  @apply font-bold text-5xl text-light-50 mb-4;
}

.left-page span {
  @apply text-gray-200 text-sm;
}

.el-row .right-page {
  @apply flex flex-col justify-center items-center bg-light-50;
}

.right-page h2 {
  @apply font-bold text-3xl text-gray-800;
}

.right-page>div {
  @apply flex justify-center items-center my-5 text-gray-300;
}

.right-page .line {
  @apply h-[1px] w-16 bg-gray-200;
}

.right-page span:nth-child(2) {
  @apply mx-1;
}

.right-page .line {
  @apply h-[1px] w-16 bg-gray-200;
}
</style>
